<template>
  <a-menu
    v-model:selectedKeys="selectedKeys"
    v-model:openKeys="openKeys"
    :theme="theme"
    mode="inline"
    @openChange="openChange"
    @click="menufun"
  >
    <template v-for="item in lists">
      <a-menu-item v-if="!item.children && !item.hidden" :key="item.path">
        <template #icon v-if="item.meta.icon">
          <svg-icon :type="item.meta.icon" />
        </template>
        {{ item.meta.title }}
      </a-menu-item>

      <a-sub-menu v-if="item.children && !item.hidden" :key="item.path">
        <template #icon v-if="item.meta.icon">
          <svg-icon :type="item.meta.icon" />
        </template>
        <template #title>{{ item.meta.title }}</template>
        <IMenuRight :menuList="item.children" :theme="theme" />
      </a-sub-menu>
    </template>
  </a-menu>
</template>
<script>
import {} from "@ant-design/icons-vue";
import { reactive, computed,watch, toRefs, defineComponent } from "vue";
import { 
  useRouter, 
  useRoute, 
  onBeforeRouteUpdate 
  } from "vue-router";
import { cache } from "@/config";
export default defineComponent({
  components: {},
  props: {
    menuList: Array,
    theme: String,
  },
  setup(props) {
    const router = useRouter(),
    route = useRoute();
    const path = computed(() => route.path);
    let MenuRightOpenKeys = cache('leftMenuRightOpenKeys')
    const state = reactive({
      lists: props.menuList,
      theme: props.theme,
      selectedKeys: [path.value], //选中当前菜单
      openKeys: MenuRightOpenKeys?MenuRightOpenKeys:[], //选中当前菜单展开与展开项
    });
    watch(() => props.menuList,(newLists) => {
        state.lists = newLists
      }
    )

    // 动态监听路由变化，选中当前菜单
    onBeforeRouteUpdate((to) => {
      state.selectedKeys = [to.path];
    });

    // 点击点击子菜单时 调用此函数
    let menufun = (item) => {
      // 跳转
      router.push({
        path: item.key,
      });
    };

    // SubMenu 展开/关闭的回调
    let openChange = (openKeys) => {
      state.openKeys = openKeys;
      cache('leftMenuRightOpenKeys',openKeys)
    };
    return {
      ...toRefs(state),
      menufun,
      openChange,
    };
  },
});
</script>

<style lang="less">
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right: 0px solid #f0f0f0 !important;
}
</style>